<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>TODOlist和局部组件的使用</title>
		<script type="text/javascript" src="../vue.js" ></script>
	</head> 
	<body>
		<div id = "root">
			<span v-bind:title="message">
			 	鼠标悬停
			</span>
			<br/>
			<input type = "text" v-model="inputValue" />
			<button v-on:click="handleBtnClick">提交</button>
			<ul>
				<todo-item v-bind:content = "item" 
					       v-bind:index = "index" 
						   v-for = "(item , index) of list"
						   @delete = "handleItemDelete">
				</todo-item>
			</ul>
		</div>
	</body>
	<script>
	  /**
	   * 父组件向子组件传值：v-bind:需要接收，如content
	   * 
	   * 子组件向父组件传值：$emit
	   */
	  var TodoItem = {
	  	props : ['content','index'],
	 	template : "<li @click='handleItemClick'>{{content}}</li>",
	  	methods : {
	  		handleItemClick :function(){
	  			this.$emit("delete",this.index);
	  		}
	  	}
	  }
	  var vm = new Vue({
	  	el : "#root",
	  	components : {
	  		TodoItem : TodoItem
	  	},
	  	data : {
		  		list : [],
		  		inputValue : '',
		  		message: '页面加载于 ' + new Date().toLocaleString()
	  	},
	  	methods : {
	  		handleBtnClick : function(){
	  			if(this.inputValue != ''){
	  				this.list.push(this.inputValue);
	  				this.inputValue = '';
	  			}
	  		},
	  		handleItemDelete :function(index){
	  			this.list.splice(index,1)
	  		}
	  	}
	  });
	</script>
</html>
